<template>
  <div class="page-style">
    <el-row>
      <el-col :span="14" :offset="5">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="授权名" prop="anent_name">
            <el-input v-model="form.anent_name" />
          </el-form-item>
          <el-form-item label="微信号" prop="anent_login_name">
            <el-input v-model="form.anent_login_name" />
          </el-form-item>
          <el-form-item label="手机号" prop="brand_phone">
            <el-input v-model="form.brand_phone" />
          </el-form-item>
          <el-form-item label="证件类型">
            <el-radio v-model="radio" label="1">身份证</el-radio>
            <el-radio v-model="radio" label="2">其他</el-radio>
          </el-form-item>
          <el-form-item v-if="radio === '1'" label="身份证" prop="people_card_num">
            <el-input v-model="form.people_card_num" />
          </el-form-item>
          <el-form-item v-if="radio === '2'" label="证件号" prop="people_card_num_new">
            <el-input v-model="form.people_card_num_new" />
          </el-form-item>
          <el-form-item label="省市区" prop="addressArr">
            <el-cascader
              v-model="form.addressArr"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="授权品牌" prop="brand_id">
            <el-select v-model="form.brand_id" placeholder="请选择授权品牌" @change="brandChange">
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.brand_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="授权等级" prop="level_int">
            <el-select v-model="form.level_int" placeholder="请选择等级">
              <el-option
                v-for="item in levelList"
                :key="item.id"
                :label="item.level_name"
                :value="item.level_int"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="上级代理代码">
            <el-input v-model="form.code_num" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="card-title">说明</span>
          </div>
          <ul class="beizhu">
            <li>上级代理授权代码不填时,上级直接归到总部</li>
            <li>会自动生成代理商后台的登陆帐号与密码</li>
            <li>帐号为：微信号</li>
            <li>密码为：手机号后6位</li>

          </ul>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { checkPhoneNumber, IdentityCodeValid } from '@/utils/rules'
import { operationAgent, getAgentIdApi, uploadWarrant } from '@/api/agent'
import { getBrandList, getBrandsLevels } from '@/api/brand'
import { drawPhoto } from '@/utils/drawPhoto'
import { conversion } from '@/utils/rules'

export default {
  data() {
    return {
      form: {
        anent_name: '',
        anent_login_name: '',
        anent_login_pass_word: '',
        brand_phone: '',
        people_card_num: '',
        people_card_num_new: '',
        address: '',
        status: 1,
        sheng: '',
        shi: '',
        qu: '',
        addressArr: [],
        brand_head_img: '',
        brand_id: '',
        level_int: '',
        anent_fid: '',
        code_num: ''
      },
      radio: '1',
      brandList: [],
      levelList: [],
      agentLev: '',
      activeNames: '',
      options: regionData,
      addressValue: [],
      rules: {
        anent_name: [
          { required: true, message: '请输入授权明', trigger: 'blur' }
        ],
        anent_login_name: [
          { required: true, message: '请输入正确的微信号码', trigger: 'blur' }
        ],
        brand_phone: [
          { required: true, validator: checkPhoneNumber, trigger: 'blur' }
        ],
        people_card_num: [
          { required: true, validator: IdentityCodeValid, trigger: 'blur' }
        ],
        people_card_num_new: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        addressArr: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        brand_id: [
          { required: true, message: '请选择授权品牌', trigger: 'change' }
        ],
        level_int: [
          { required: true, message: '请选授权等级', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getBrandListFun()
  },
  methods: {
    handleChange(val) {
      console.log(val)
      const arr = []
      for (const i in val) {
        arr.push(CodeToText[val[i]])
      }
      this.form.sheng = arr[0]
      this.form.shi = arr[1]
      this.form.qu = arr[2]
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.anent_login_pass_word = this.form.brand_phone.slice(5)
          console.log(this.form.anent_login_pass_word)
          if (this.form.code_num !== '') {
            const info = {
              brand_id: this.form.brand_id,
              code_num: this.form.code_num
            }
            getAgentIdApi(info).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.form.anent_fid = res.log.anent_id
                const form = this.form
                const pro = {
                  anent_name: form.anent_name,
                  anent_login_name: form.anent_login_name,
                  anent_login_pass_word: form.anent_login_pass_word,
                  status: form.status,
                  brand_phone: form.brand_phone,
                  brand_head_img: form.brand_head_img,
                  people_card_num: form.people_card_num ? form.people_card_num : form.people_card_num_new,
                  sheng: form.sheng,
                  shi: form.shi,
                  qu: form.qu,
                  address: form.address
                }
                const pro_one = {
                  anent_fid: form.anent_fid,
                  level_int: form.level_int,
                  brand_id: form.brand_id
                }
                const data = {
                  type: 1,
                  pro: pro,
                  pro_one: pro_one,
                  status: 1
                }
                console.log(data)
                this.operationAgentFun(data)
              }
            })
          } else {
            const form = this.form
            const pro = {
              anent_name: form.anent_name,
              anent_login_name: form.anent_login_name,
              anent_login_pass_word: form.anent_login_pass_word,
              status: form.status,
              brand_phone: form.brand_phone,
              brand_head_img: form.brand_head_img,
              people_card_num: form.people_card_num ? form.people_card_num : form.people_card_num_new,
              sheng: form.sheng,
              shi: form.shi,
              qu: form.qu,
              address: form.address
            }
            const pro_one = {
              anent_fid: form.anent_fid,
              level_int: form.level_int,
              brand_id: form.brand_id
            }
            const data = {
              type: 1,
              pro: pro,
              pro_one: pro_one,
              status: 1
            }
            console.log(data)
            this.operationAgentFun(data)
          }
        } else {
          this.$message.info('请完善必填信息！')
        }
      })
    },
    getBrandListFun() {
      const data = {
        brand_id: this.$store.state.user.brand_id
      }
      getBrandList(data).then(res => {
        this.brandList = res.list
      })
    },
    brandChange(val) {
      const data = {
        brand_id: val
      }
      getBrandsLevels(data).then(res => {
        this.levelList = res.list
      })
    },
    operationAgentFun(data) {
      operationAgent(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          // this.$message.success('代理添加成功！')
          this.form = {
            anent_name: '',
            anent_login_name: '',
            anent_login_pass_word: '',
            brand_phone: '',
            people_card_num: '',
            status: 1,
            address: '',
            sheng: '',
            shi: '',
            qu: '',
            addressArr: [],
            brand_head_img: '',
            brand_id: '',
            level_int: '',
            anent_fid: '',
            code_num: ''
          }
          const textArr = [
            {
              text: res.anent_name,
              x: 270,
              y: 420
            },
            {
              text: conversion(res.people_card_num, 6, 14, 8),
              x: 270,
              y: 475
            },
            {
              text: res.anent_login_name,
              x: 270,
              y: 530
            },
            {
              text: res.code_num,
              x: 270,
              y: 585
            },
            {
              text: res.level_name,
              x: 270,
              y: 640
            },
            {
              text: res.yes_date,
              x: 270,
              y: 695
            }
          ]
          let warrantImg = ''
          const info = res
          drawPhoto(res.approval_img, { width: '800', height: '1131' }, textArr, imgUrl => {
            console.log(imgUrl)
            warrantImg = imgUrl
            const that = this
            const imgData = {
              anent_id: info.anent_id,
              brand_id: info.brand_id,
              code_num: info.code_num,
              anent_approval_img: warrantImg
            }
            console.log(imgData)
            uploadWarrant(imgData).then(res => {
              console.log(res)
              if (res.code === 200) {
                that.$message.success('代理信息提交成功！')
              }
            })
          })
        } else if (res.code === 400) {
          this.$message.warning('代理添加失败，请重新提交！')
        } else if (res.code === 4001) {
          this.$message.warning('微信号重复，请重新录入新的微信号！')
          this.form.brand_login_name = ''
        } else if (res.code === 4002) {
          this.$message.warning('手机号码重复，请重新录入！')
          this.form.brand_phone = ''
        } else if (res.code === 4003) {
          this.$message.warning('身份证号码重复，请重新录入！')
          this.form.people_card_num = ''
        } else {
          this.$message.warning('代理添加失败，请重新提交！')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .beizhu li {
    font-size: 12px;
    color: #aaa;
    line-height: 24px;
  }
  ul {
    margin:0;
    padding:0 10px;
  }
  .card-title {
    font-size: 14px;
    color: #aaa;
  }
</style>
